<template>
  <div class="mainContent">
    <a-spin :spinning="spinning">
      <div style="width:90%;">
        <a-form style="margin-bottom: 20px;" layout="inline">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="起始SN设备号" v-bind="formItemLayout">
                <a-input v-model="query.startSncode" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="结束SN设备号" v-bind="formItemLayout">
                <a-input v-model="query.endSncode" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <a-form style="margin-bottom: 20px;" layout="inline">
          <a-button style="margin-left: 40px;" @click="openTerminal" type="primary">全部撤销</a-button>
          <a-button style="margin-left: 40px;" @click="RelieveTerminal" type="primary">勾选撤销</a-button>
        </a-form>
      </div>
      <a-table
        :columns="columns"
        :dataSource="list"
        :rowSelection="rowSelection"
        :pagination="false"
        :rowKey="record => record.snCode"
      />
      <div>
        <a-pagination
          style="margin-top:15px;float: right;"
          @change="pageChange"
          :pageSizeOptions="pageSizeOptions"
          :current="pagination.current"
          :total="pagination.total"
          :pageSize="pagination.pageSize"
          show-size-changer
          show-quick-jumper
          @showSizeChange="onShowSizeChange"
        />
      </div>

      <!-- <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value!=='50'">{{props.value}}条/页</span>
          <span v-if="props.value==='50'">全部</span>
      </template>-->
    </a-spin>
    <a-modal
      style="top: 250px;"
      @ok="handleOk"
      @cancel="handleCancel"
      :visible="modalVisible"
      :footer="null"
    >
      <div class="modalClass">
        <h4>撤销全部未绑定SN设备号</h4>
        <h4>合计数量：{{allTotalSn}}</h4>
        <div class="footClass">
          <a-button class="btnClass" type="primary" @click="opencloseTerminal">确认</a-button>
          <a-button class="btnClass" type="primary" @click="handleCancel">取消</a-button>
        </div>
      </div>
    </a-modal>
    <a-modal
      style="top: 250px;"
      @ok="handleOk2"
      @cancel="handleCancelRelieve"
      :visible="RelieveVisible"
      :footer="null"
    >
      <div class="modalClass">
        <h4>撤销勾选未绑定SN设备号</h4>
        <h4>合计数量：{{selectedList.length}}</h4>
        <div class="footClass">
          <a-button class="btnClass" type="primary" @click="sureClose">确认</a-button>
          <a-button class="btnClass" type="primary" @click="handleCancelRelieve">取消</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "SN设备号",
    dataIndex: "snCode",
  },
  {
    title: "当前状态",
    dataIndex: "statusName",
  },
];

import { message } from "ant-design-vue";
import api from "@/common/api";
import { error } from "util";
import { fail } from "assert";
import AHideData from "../common/HideData";

export default {
  name: "orgMyInfo",
  components: {
    AHideData,
  },
  data() {
    return {
      columns,
      iconLoading: false,
      spinning: false,
      terminalStatus: 1,
      sncode: "",
      id: "",
      modalVisible: false,
      RelieveVisible: false,
      openButton: false,
      pageShow: false,
      revoke: {
        isAll: false,
        snCodes: ["", ""],
        startSncode: null,
        endSncode: null,
      },
      query: {
        // startSncode: null,
        // endSncode: null,
        // current: 1,
        // pageSize: 5
        data: "",
        page: 1,
        pageSize: 5,
      },
      list: [],
      selectedList: [],
      pageSizeOptions: ["5", "10", "15", "20", "25"],
      pagination: {
        current: 1,
        total: 0,
        pageSize: 5,
      },
      terminalDTO: {},
      attachRequest: {},
      allTotalSn: 0,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15, offset: 1 },
          md: { span: 15, offset: 1 },
        },
      },
    };
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(
            `selectedRowKeys: ${selectedRowKeys}`,
            "selectedRows: ",
            selectedRows
          );
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.isUsing, // Column configuration not to be checked
            name: record.name,
          },
        }),
        onSelect: (record, selected, selectedRows) => {
          console.log(record, selected, selectedRows);
          this.selectedList = selectedRows;
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          console.log(selected, selectedRows, changeRows);
          this.selectedList = selectedRows;
        },
      };
    },
  },
  mounted() {
    // this.query.startSncode = this.$route.params.begin;
    // this.query.endSncode = this.$route.params.end;
    this.query.data = this.$route.params.id;
    this.revokeList();
    // console.log(id)
    // console.log(this.terminalStatus)
    var self = this;
    $(".ant-pagination-options-quick-jumper input").on(
      "input propertychange",
      function () {
        // console.log("1342343543543543543545");
        // console.log($(this).val());
        let currentPage = Number($(this).val());
        if (
          currentPage &&
          currentPage <= Math.ceil(self.pagination.total / self.query.pageSize)
        ) {
          self.pageChange(currentPage, self.query.pageSize);
        }
      }
    );
  },
  methods: {
    handleOk(e) {
      this.modalVisible = false;
    },
    handleOk2(e) {
      this.RelieveVisible = false;
    },
    handleCancel(e) {
      this.modalVisible = false;
    },
    showConfirm() {
      let self = this;
      this.$success({
        title: "SN设备号撤销成功！",
        okText: "确定",
        onOk() {
          self.goRevokeDetail();
          console.log("OK");
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "test",
      });
    },
    openTerminal() {
      this.revoke = {
        isAll: true,
        snCodes: ["", ""],
        startSncode: this.$route.params.begin,
        endSncode: this.$route.params.end,
      };
      this.modalVisible = true;
    },
    revokeActivity(isAll) {
      this.revoke.isAll = isAll;
      api.revokeActivity(
        this.revoke,
        (res) => {
          console.log("res", res);
          if (res.code == "OK") {
            this.RelieveVisible = false;
            this.modalVisible = false;
            // this.$message.success("解绑成功");
            this.showConfirm();
            // this.$router.push(
            //   `/marketing/snRevokeDetail/${this.$route.params.id}`
            // );
          } else {
            this.modalVisible = false;
            this.RelieveVisible = false;
            this.$message.error(res.data.message);
          }
        },
        (err) => {}
      );
    },
    revokeList() {
      api.revokeList(
        this.query,
        (res) => {
          console.log("res", res);
          if (res.code == "OK") {
            this.pageShow = true;
            this.list = res.list;
            this.pagination.current = res.current;
            this.pagination.total = res.total;
            if (res.list.length > 0) {
              this.allTotalSn = res.list[0].unUsingCount;
            } else {
              this.allTotalSn = 0;
            }
            // this.allTotalSn = 0;
            // this.list.forEach((item, index) => {
            //   if (!item.isUsing) {
            //     this.allTotalSn++;
            //   }
            // });
          } else {
            this.$message.error(res.message);
          }
        },
        (err) => {}
      );
    },

    RelieveTerminal() {
      if (this.selectedList.length > 0) {
        this.RelieveVisible = true;
      } else {
        this.$message.info("请勾选要撤销的SN设备号！");
      }
    },
    handleCancelRelieve(e) {
      this.RelieveVisible = false;
    },
    opencloseTerminal() {
      this.revoke.snCodes = this.selectedList.map((item, index) => {
        return item.snCode;
      });
      console.log(this.revoke);
      this.revokeActivity(true);
    },
    sureClose() {
      this.revoke.snCodes = this.selectedList.map((item, index) => {
        return item.snCode;
      });
      console.log(this.revoke);
      this.revokeActivity(false);
    },
    downLoadOther() {
      this.$axios.post("/file/file/attach", this.attachRequest).then((res) => {
        if (res.data.data != null) {
          window.location.href = res.data.data;
        } else {
          this.$message.error("附件不存在");
        }
      });
    },
    modifyInfo() {},
    pageChange(page, pageSize) {
      console.log(page, pageSize);
      this.pagination.current = page;
      this.query.page = page;
      this.query.pageSize = pageSize;
      this.revokeList();
    },
    onShowSizeChange(current, pageSize) {
      this.pagination.pageSize = pageSize;
      this.query.page = current;
      this.query.pageSize = pageSize;
      this.revokeList();
    },
    onShowQuickJumpe(current, pageSize) {
      console.log(current, pageSize);
    },
    goRevokeDetail() {
      this.$router.push(`/marketing/snRevokeDetail/${this.$route.params.id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.card_sty {
  margin-bottom: 30px;
}

.mainContent {
  overflow-y: scroll;
  height: 100%;
  padding: 70px;
}

/* 滚动条样式 */
.mainContent::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

span {
  cursor: pointer;
}

.formItemWidth {
  width: 30%;
  margin-bottom: 10px;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 15px;
  text-align: left;
  /* margin-left: 20px; */
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}

.modalClass {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 10px;
}

.modalClass h4 {
  font-size: 20px;
  font-weight: 400;
  margin-top: 15px;
  margin-bottom: 25px;
}

.modalClass p {
  margin-bottom: 10px;
}

.footBtnClass {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footClass {
  width: 60%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.btnClass {
  width: 110px;
}

#components-pagination-demo-mini .ant-pagination:not(:last-child) {
  margin-bottom: 24px;
}
</style>